<template>
    <div class="container">
        <div class="header">
            <div class="empty"/>
            <n-button
                  text
                  @click="managerLogin"
            >
                <n-gradient-text type="success">
                    超级管理员看这边
                </n-gradient-text>
                <template #icon>
                    <n-icon color="#0e7a0d">
                        <arrow-right />
                    </n-icon>
                </template>
            </n-button>
        </div>
        <div class="blank"/>
        <div class="card">
            <n-grid x-gap="20" :cols="3">
                <n-gi>
                    <identity-card identity="school"/>
                </n-gi>
                <n-gi>
                    <identity-card identity="student"/>
                </n-gi>
                <n-gi>
                    <identity-card identity="enterprise"/>
                </n-gi>
            </n-grid>
        </div>
        <div class="blank"/>
    </div>
</template>

<script>
import IdentityCard from '../components/IdentityCard'
import { ArrowRight } from '@vicons/carbon'

export default {
    name: 'ChooseIdentity',
    components: {
        IdentityCard,
        ArrowRight
    },
    methods: {
        managerLogin() {
            this.$store.commit('setIdentity', 'admin')
            this.$router.push({name: 'login'})
        }
    }
}
</script>

<style scoped lang="less">
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    .header {
        display: flex;
        align-items: center;
        width: 100%;
        height: 10%;
        .empty {
            width: 100%;
        }
    }
    .card{
        position: relative;
        width: 100%;
        padding-left: 10%;
        padding-right: 10%;
        display: flex;
        flex-direction: column;
    }
}
.blank {
    height: 100%;
}
</style>